<template>
  <div>
    <!-- header -->
    <navBar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    ></navBar>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in detailList.pics" :key="index" @click="clickImg">
        <img v-lazy="image.pics_mid" :src="image.pics_mid" />
      </van-swipe-item>
    </van-swipe>
    <!-- 详情内容 -->
    <van-row>
      <van-col span="8" class="goodPrice">¥{{detailList.goods_price}}</van-col>
    </van-row>
    <van-row>
      <van-col class="goodsName" span="19">{{detailList.goods_name}}</van-col>
      <van-col span="5" class="favorite">
        <van-icon name="star-o" />
        <p>收藏</p>
      </van-col>
    </van-row>
    <!-- 快递 -->
    <van-row>
      <van-col class="colstyle">
        <b>快递:免运费</b>
      </van-col>
    </van-row>
    <van-divider :hairline="false" />
    <!-- 促销 -->
    <van-row>
      <van-col class="colstyle">
        <p>促销:满300件30</p>
      </van-col>
    </van-row>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
      <van-goods-action-icon icon="shop-o" text="店铺" info="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <van-divider :hairline="false" />
    <!-- 地址 -->
    <van-row>
      <van-col :span="6" class="colstyle">
        <b>送至:</b>
      </van-col>
      <van-col :span="13" class="colstyle">
        <i class="addressText">请选择收货地址</i>
      </van-col>
      <van-col :span="5" class="colstyle">
        <b class="textIcon">></b>
      </van-col>
    </van-row>
    <van-divider :hairline="false" />
    <!-- tab栏切换 -->
    <van-tabs v-model="activeName">
      <van-tab title="图文详情" name="a" v-html="contextHtml"></van-tab>
      <van-tab title="规格参数" name="b">
        <van-row :key="item.attr_id" v-for="item in detailList.attrs">
          <van-col class="specification" span="12">{{item.attr_name}}</van-col>
          <van-col class="specification" span="12">{{item.attr_value}}</van-col>
        </van-row>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Vue from 'vue';
import { ImagePreview } from 'vant';

Vue.use(ImagePreview);
import navBar from '../../util/navBar.vue'
export default {
  components: { navBar },
  data() {
    return {
      title: '黑马优购',
      // 详情页面
      detailList: {},
      //
      activeName: 'a',
      contextHtml: '',
      listImg :[]

    }
  },
  methods: {
    onClickLeft() {},
    onClickRight() {},
    async getDetailList() {
        const goodId = sessionStorage.getItem('id')
      const { data: res } = await this.$http.get('goods/detail', {
        params: { goods_id: goodId }
      })
      console.log(res)
      this.detailList = res.message
    //   const obj = {checked:true}
      this.detailList['checked'] = true
      this.$store.commit('addShopList', res.message)
      console.log(this.detailList)
      this.contextHtml = res.message.goods_introduce
      res.message.pics.forEach(item => this.listImg.push(item.pics_mid))
    //   this.listImg = res.message.pics
    },
    // 客服
    onClickIconCustomer() {},
    // 购物车
    onClickIconShop() {},
    // 加入购物车
    onClickButtonCat() {
      this.$store.commit('addShopList')
      alert(1)
      this.$router.push('/mycard')
    },
    //立即购买
    onClickButtonBuy() {},
    clickImg() {
        ImagePreview(
            this.listImg
        )
    }

    
  },
  created() {
    this.getDetailList()
  }
}
</script>
<style lang="css" scoped>
div {
  color: #505050;
}
.goodPrice {
  color: #ff0000;
  margin: 10px 0;
  padding: 0 20px;
  font-size: 25px;
}
.goodsName {
  font-size: 12px;
  border-right: 1px solid #eee;
  padding: 5px 30px 5px 20px;
}
p {
  margin: 0;
  padding: 0;
}
.favorite {
  text-align: center;
}
.colstyle {
  padding: 5px 30px 5px 20px;
}
.van-goods-action {
  z-index: 100;
}
i {
  font-style: normal;
}
.specification {
  text-align: left;
  padding: 10px 10px 10px 30px;
  font-size: 12px;
  border: 0.3px solid #ebedf0;
  border-bottom: none;
}
.van-tabs {
  margin-bottom: 50px;
}
</style>